import React from "react";
import { Input, Col, Row, DatePicker ,Tree ,Table,Select,Switch} from 'antd';
import { Button} from 'antd';
import { SearchOutlined,DeleteOutlined,PlusOutlined} from '@ant-design/icons';
import "./index.css"
import Layout from "antd/lib/layout/layout";
import Dialog from "../../../components/dialog"
import {DownOutlined,FrownOutlined,SmileOutlined,MehOutlined,FrownFilled,EditFilled,DeleteFilled} from '@ant-design/icons';
const { Option } = Select;
export default class ProductList extends React.Component{
    constructor(){
      super()
      let _this=this
      this.state={
        dialogVisible:false,
        actionType: "添加商品",
        treeData:[
          {
            title: 'parent 1',
            key: '0-0',
            icon: <SmileOutlined />,
            children: [
              {
                title: 'leaf',
                key: '0-0-0',
                icon: <MehOutlined />,
              },
              {
                title: 'leaf',
                key: '0-0-1',
                icon: ({ selected }) => (selected ? <FrownFilled /> : <FrownOutlined />),
              },
            ],
          },
        ],
        columns:[
          {
            title: '产品编号',
            dataIndex: 'number',
          },
          {
            title: '产品名称',
            dataIndex: 'name',
            render: text => <a>{text}</a>,
          },
          {
            title: '原价格',
            dataIndex: 'oldprice',
          },
          {
            title: '现价格',
            dataIndex: 'newprice',
          },
          {
            title: '所属地区/国家',
            dataIndex: 'country',
          },
          {
            title: '加入时间',
            dataIndex: 'date',
            sorter: (a, b) => a.date - b.date,
          },
          {
            title: "是否上架",
            dataIndex: 'state',
            render(switched,row){return <Switch defaultChecked onChange={_this.selected.bind(_this,switched,row)}></Switch>}
          },
          {
            title: '操作',
            dataIndex:"action",
            width: 200,
            render(row){
              return(
                <div style={{display:"flex",flexDirection:"row",justifyContent:"space-around"}}>
                  <Button type="primary" size="small" style={{fontSize:"14px"}}>禁用</Button>
                  <Button type="primary" size="small" icon={<EditFilled />} onClick={_this.edit.bind(_this)} style={{width:"48px",backgroundColor:"#FF7F50",border:"none"}}></Button>
                  <Button type="primary" danger size="small" icon={<DeleteFilled />} onClick={_this.delete.bind(_this)} style={{width:"48px"}}></Button>
                </div>
              )
            }
          },
        ],
        data:[
          {
            key:"1",
            number: "1",
            name: 'John Brown',
            oldprice: '￥300,000.00',
            newprice:'￥300,000.01',
            country: 'CN',
            date:"2018",
            audit:"通过",
            state:"未启用",
          },
          {
            key:"2",
            number: "2",
            name: 'John Brown',
            oldprice: '￥300,000.00',
            newprice:'￥300,000.01',
            country: 'CN',
            date:"2016",
            audit:"通过",
            state:"启用",
          },
          {
            key:"3",
            number: "3",
            name: 'John Brown',
            oldprice: '￥300,000.00',
            newprice:'￥300,000.01',
            country: 'CN',
            date:"2031",
            audit:"通过",
            state:"未启用",
          },
          {
            key:"4",
            number: "4",
            name: 'John Brown',
            oldprice: '￥300,000.00',
            newprice:'￥300,000.01',
            country: 'CN',
            date:"2031",
            audit:"未通过",
            state:"启用",
          },
          {
            key:"5",
            number: "5",
            name: 'John Brown',
            oldprice: '￥300,000.00',
            newprice:'￥300,000.01',
            country: 'CN',
            date:"2031",
            audit:"待审核",
            state:"启用",
          }
        ],
        rowSelection:{
          onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
          },
          getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            name: record.name,
          }),
        }
      }
    }
   
    handleChange(){

    }
    selected(switched,row) {
      console.log(switched)
      console.log(row)
    }
    edit(row){

      console.log(row)
    }
    delete(row){
      console.log(row)
    }
    addProduct(){
      this.setState({
        dialogVisible:true
      })
    }
    hideDialog(){
      this.setState({
        dialogVisible:false
      })
    }
    render(){
        return(
            <Layout className="productlist">
                <Dialog onCancel={this.hideDialog.bind(this)} dialogVisible={this.state.dialogVisible} actionType={this.state.actionType}></Dialog>
                <Row style={{background: "#fff"}}>
                    <Col span={18}>
                        <div className="top-input">
                            <label style={{width:"12%",display:"flex",justifyContent:"center",alignItems:"center"}}>产品名称</label>
                            <Input placeholder="输入品牌名称" style={{width:"45%"}}/>
                            <label style={{width:"12%",display:"flex",justifyContent:"center",alignItems:"center"}}>添加时间</label>
                            <DatePicker style={{ width: '50%' }} />
                            <Button type="primary" icon={<SearchOutlined/>} style={{marginLeft:"15px"}}>查询</Button>
                        </div>
                    </Col>
                </Row>
                <Row style={{background: "#fff"}}>
                    <div className="ways">
                        <Button type="primary"  style={{marginLeft:"15px"}} icon={<PlusOutlined />} onClick={this.addProduct.bind(this)}>添加商品</Button>
                        <Button type="primary"  danger style={{marginLeft:"15px"}} icon={<DeleteOutlined />}>批量删除</Button>
                    </div>
                </Row>
                <Row style={{background: "#fff"}}>
                    <div className="content">
                        <aside>
                            <p>产品类型列表</p>
                            <Tree
                                defaultExpandAll
                                defaultSelectedKeys={['0-0-0']}
                                switcherIcon={<DownOutlined />}
                                treeData={this.state.treeData}>
                            </Tree>
                        </aside>
                        <div className="table">
                          <Row style={{marginTop:"5px"}}>
                            <label style={{lineHeight:"32px",margin:"0 5px 0 5px"}}>每页显示</label>
                            <Select defaultValue="10条" style={{ width: 120}} onChange={this.handleChange.bind(this)}>
                              <Option value="10">10条</Option>
                            </Select>
                          </Row>
                          <Table style={{width:"99%",height:"340px",overflow:"hidden",margin:"5px"}} 
                          columns={this.state.columns} 
                          dataSource={this.state.data}  
                          bordered 
                          pagination={false} 
                          rowSelection={this.state.rowSelection}
                          scroll={{y:"300px"}}
                          ></Table>
                        </div>
                    </div>
                </Row>
            </Layout>
        )
    }
}